import React, { Component } from 'react'
import { connect } from 'react-redux'

import {
  TopicWrapper, 
  TopicItem
} from '../style'
class Topic extends Component {
  render() {
    const { list } = this.props
    return (
      <TopicWrapper>
        {
          list.map(item => (
            <TopicItem key={item.get('id')}>
              <img className="topic-pic" alt="1" src={item.get('imgUrl')} />
              {item.get('title')}
            </TopicItem>
          ))
        }
        
      </TopicWrapper>
    )
  }
}

const myState = (state) => ({
  list: state.get('home').get('topicList')
})


export default connect(myState, null)(Topic)
